<template>
	<van-icon v-if="value" color="#3296fa" name="star" @click="onCollect" />
	<van-icon v-else color="#777" name="star-o" @click="onCollect" />
</template>

<script>
	import {addCollect, deleteCollect} from '@/api/article.js'
	
	export default {
		props: {
			value: {
				type: Boolean,
				required: true
			},
			articleId: {
				type: [Number, String, Object],
				required: true
			}
		},
		
		methods: {
			async onCollect() {
				try{
					if(this.value) {
						await deleteCollect(this.articleId)
					} else {
						await addCollect(this.articleId)
					}
					this.$emit('input', !this.value)
					this.$toast.success(this.value ? '取消收藏':'收藏成功')
				}catch(e){
					this.$toast("操作失败，请稍后重试")
				}
			},
		},
	}
</script>

<style scoped>

</style>
